<template>
  <div class="echarts" id="echarts" ref="echarts" style="width:100%;height:100%"></div>
</template>

<script>
import * as echarts from 'echarts'
import china from './data/chinaA.json'
import biaozhu from '@/assets/images/bigScreen/fuwuqu.png'
export default {
  name: 'AlOvECharts',
  data() {
    return {}
  },

  props: [],
  // 注册组件
  components: {},
  // 计算属性
  computed: {},
  // 生命周期函数
  mounted() {
    this.echartsInit()
  },
  // 侦听器
  // watch: {
  //   data: {
  //     // 自动触发,只能使用handler
  //     handler(newVal, oldVal) {
  //       // console.log(newVal);
  //       // console.log(oldVal);
  //     }
  //     // true表示侦听器立即触发(immediate默认为false)
  //     // immediate: true,
  //     // true表示深度侦听，侦听对象属性的变化
  //     // deep: true
  //   }
  // },
  // 事件函数
  methods: {
    echartsInit() {
      let that = this
      const chartDom = this.$refs.echarts
      const myChart = echarts.init(chartDom)
      echarts.registerMap('china', china)
      console.log('打印一下看看', myChart)
      // 水波点
      let points = [
        { value: [118.077583, 36.618512], itemStyle: { color: '#00EEFF' } },
        { value: [116.731758, 35.945446], itemStyle: { color: '#00EEFF' } }
      ]
      // 画线
      let coordsArr = [
        [118.077583, 36.618512],
        [126.642464, 45.756967]
      ]
      let markList = [
        {
          // 每个数据项代表一个标记点
          name: '北京市朝阳区', // 地名
          value: [118.077583, 36.618512], // 经纬度坐标
          symbol: 'image://' + require('../../../../assets/markImg/隧道@2x.png'), // 自定义图标路径
          symbolSize: [60, 60], // 图标大小
          symbolOffset: [0, -30] // 向右偏移20px，向下偏移10px
        }
        // 更多其他点位...
      ]
      let geoCoordMap = {
        黑龙江: [127.9688, 45.368],
        内蒙古: [110.3467, 41.4899],
        吉林: [125.8154, 44.2584],
        北京市: [116.4551, 40.2539],
        辽宁: [123.1238, 42.1216],
        河北: [114.4995, 38.1006],
        天津: [117.4219, 39.4189],
        山西: [112.3352, 37.9413],
        陕西: [109.1162, 34.2004],
        甘肃: [103.5901, 36.3043],
        宁夏: [106.3586, 38.1775],
        青海: [101.4038, 36.8207],
        新疆: [87.611053, 43.828171],
        西藏: [91.117212, 29.646922],
        四川: [103.9526, 30.7617],
        重庆: [108.384366, 30.439702],
        山东: [117.1582, 36.8701],
        河南: [113.4668, 34.6234],
        江苏: [118.8062, 31.9208],
        安徽: [117.29, 32.0581],
        湖北: [114.3896, 30.6628],
        浙江: [119.5313, 29.8773],
        福建: [119.4543, 25.9222],
        江西: [116.0046, 28.6633],
        湖南: [113.0823, 28.2568],
        贵州: [106.6992, 26.7682],
        云南: [102.9199, 25.4663],
        广东: [113.12244, 23.009505],
        广西: [108.479, 23.1152],
        海南: [110.3893, 19.8516],
        台湾: [120.702967, 24.123621],
        上海: [121.4648, 31.2891]
      }
      /*获取地图数据*/
      myChart.showLoading()
      var mapFeatures = echarts.getMap('china').geoJson.features
      myChart.hideLoading()
      mapFeatures.forEach(function (v) {
        // 地区名称
        var name = v.properties.name
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp
      })
      let option = {
        geo: {
          map: 'china',
          roam: true, // 是否开启放大缩小/拖拽功能
          zoom: 1.2, // 缩放比列
          layoutCenter: ['50%', '40%'], // 地图中心点位置
          layoutSize: '100%',
          label: {
            show: true,
            color: '#fff'
          },
          itemStyle: {
            areaColor: '#12235c',
            borderColor: '#2ab8ff',
            borderWidth: 0.5,
            shadowColor: 'rgba(0,54,255, 0.4)',
            shadowBlur: 100
          },
          emphasis: {
            //区域激活时的样式
            itemStyle: {
              areaColor: '#02102b'
            },
            label: {
              color: '#fff'
            }
          }
        },
        series: [
          // 地图画线
          {
            type: 'lines',
            coordinateSystem: 'geo',
            data: [
              {
                coords: coordsArr
              }
            ],
            lineStyle: {
              color: 'red',
              width: 5,
              type: 'solid'
            }
          },
          // 带有涟漪特效动画的散点（气泡）图
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            showEffectOn: 'render',
            zlevel: 1,
            rippleEffect: {
              number: 3, // 波纹的数量。
              period: 5, // 动画的周期，秒数。
              scale: 20, // 动画中波纹的最大缩放比例。
              brushType: 'stroke' // 波纹的绘制方式，可选 'stroke' 和 'fill'。
            },
            symbolSize: 2,
            data: points
          },
          // 自定义mark点
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            data: markList
          }
        ]
      }

      option && myChart.setOption(option, true)

      // 全局监听 click 事件
      myChart.on('click', params => {
        if (params.componentType === 'series' && params.seriesType === 'scatter') {
          console.log('Clicked on scatter series:', params)
          // 在这里添加你的处理逻辑
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
</style>